<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chapter 12: Pre-processors | Tiny CSS Projects</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Keeping it Sassy</h1>
  <h2>Step 1</h2>
  <img src="https://bit.ly/3VUzJ7g" alt="blue print">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta erat nec ipsum volutpat ultrices. Pellentesque
    ac mi lobortis, <a href="">tincidunt purus</a> eu, gravida enim. Vestibulum pharetra a arcu ac suscipit. Ut et lorem
    dui. Donec non vehicula orci. Nunc non ornare mi, ac aliquam risus.</p>
  <p class="success">You did it!</p>
  <p>Ut maximus id erat et mollis. Aenean sit amet fringilla augue. Donec convallis vel nibh vitae porttitor. Phasellus
    elementum nibh at erat semper consectetur. Praesent convallis iaculis mauris, sit amet egestas nunc gravida in.
    Donec dapibus mattis nibh, sed iaculis libero blandit et.</p>
  <h2>Step 2</h2>
  <img src="https://bit.ly/3F4vd0f" alt="crane">
  <p>Aenean non lorem tincidunt, vulputate nibh et, convallis felis. Donec at tristique sem. Aenean id leo non lectus
    hendrerit sodales. Maecenas vulputate scelerisque dignissim. Integer purus nisl, blandit in odio a, gravida interdum
    velit. Etiam consectetur risus ante, vel pulvinar felis eleifend ut. Phasellus nec tellus vitae sem semper ultrices
    at et ligula.</p>
  <p class="warning">Don't press the big red button</p>
  <p>Proin pharetra, urna et sagittis lacinia, quam metus vulputate eros, ac congue quam leo suscipit est. Vestibulum
    ante ipsum primis in faucibus <a href="">orci luctus</a> et ultrices posuere cubilia curae; Vestibulum nec suscipit
    ipsum. Vestibulum dapibus, neque vel lacinia mattis, magna sapien hendrerit justo, sed laoreet sapien enim quis
    mauris.</p>
  <h2>Step 3</h2>
  <img src="https://bit.ly/3N42oD1" alt="wrong way">
  <p>Nullam ut auctor nisi. Vestibulum pretium vitae erat et hendrerit. Donec velit ipsum, fringilla sed aliquam non,
    tincidunt a mauris. Mauris sit amet diam lacus. Donec gravida felis nec ligula ultricies, et molestie tellus
    tristique.</p>
  <p class="error">Mistakes have been made</p>
  <p>Vestibulum interdum eleifend suscipit. Nullam imperdiet dignissim nulla, et mattis erat dignissim ut. Proin dui
    felis, venenatis sit amet lacus at, commodo elementum dolor. Vestibulum et justo eu est pharetra pulvinar. Duis
    fermentum iaculis velit, in hendrerit metus efficitur vel. Fusce vitae mollis nisl. Fusce eu viverra erat. Vivamus
    nunc risus, consectetur at eros ac, bibendum viverra massa. Aliquam metus lacus, condimentum in ligula eget,
    molestie faucibus odio. Integer eros tellus, tristique non elementum eget, congue scelerisque quam.</p>
</body>

</html>